<template>
    <div class="sea-page-row small-page">
        <font-request class="page-left width-25 flex-box box-primary" :provider="queryMenus" >
            <template #default="{response, reload, loading}">

                <div class="flex-header">
                    <h5>菜单列表</h5>
                    <span>点击下方列表，即可修改配置</span>
                    <a @click="reload" class="pull-right"><i class="fa fa-refresh"></i> 刷新</a>
                </div>

                <div class="flex-body">
                    <el-skeleton :data="response" :loading="loading">
                        <sea-editable-tree :options="response" :click="onModify" :modify="onModify"
                                           :create="onCreate" :remove="onRemove">
                        </sea-editable-tree>
                    </el-skeleton>
                </div>
            </template>
        </font-request>

        <div class="page-body flex-box box-info">
            <div class="flex-header">
                <h5>编辑菜单</h5>
                <span>点击右侧菜单开始编辑</span>
            </div>

            <div class="flex-body">
                <sea-form style="max-width: 30vw;" :model="form_data" :rules="form_rules" :submit="menu.modify"
                          :succeed="onSucceed">

                    <el-form-item label="组别" prop="groupName">
                        <el-input v-model="form_data.groupName" placeholder="组别"></el-input>
                    </el-form-item>
                    <el-form-item label="图标" prop="icon">
                        <el-input v-model="form_data.icon" placeholder="图标"></el-input>
                    </el-form-item>
                    <el-form-item label="名称" prop="name">
                        <el-input v-model="form_data.name" placeholder="在同胞菜单中唯一的英文名"></el-input>
                    </el-form-item>
                    <el-form-item label="标题" prop="title">
                        <el-input v-model="form_data.title" placeholder="用于展示的标题"></el-input>
                    </el-form-item>
                    <el-form-item label="路径" prop="src">
                        <el-input v-model="form_data.src" placeholder="路径"></el-input>
                    </el-form-item>
                    <el-form-item label="描述" prop="description">
                        <el-input v-model="form_data.description" placeholder="描述"></el-input>
                    </el-form-item>
                    <el-form-item label="类型" prop="type">
                        <el-input v-model="form_data.type" placeholder="类型"></el-input>
                    </el-form-item>
                    <el-form-item label="排序" prop="orderBy">
                        <el-input type="number" v-model="form_data.orderBy" placeholder="排序"></el-input>
                    </el-form-item>
                    <el-form-item label="是否可编辑" prop="editable">
                        <el-switch v-model="form_data.editable" placeholder="是否可编辑"></el-switch>
                    </el-form-item>
                    <el-form-item label="是否可用" prop="disabled">
                        <el-switch v-model="form_data.disabled" placeholder="是否可用"></el-switch>
                    </el-form-item>
                </sea-form>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import Bamboo from "@/lang/bamboo";
import {reactive, ref} from "vue";
import menu from "./menu.js";
import FontRequest from "@/widget/request/font-request.vue";
import Layers from "@/lang/layers/index.js";

const form_rules = reactive(menu.formRules);

const form_data = ref(menu.formModel());

/**
 * 新增节点
 * @param node 节点
 * @param data 数据
 * @returns {Promise<*>}
 */
const onCreate = (data, node) => {
    return menu.create(data.id).then(ret => Bamboo.wrapObject(ret, menu.mapper_menus)).catch(err => console.error(err));
}

/**
 * 移除节点
 * @param node 节点
 * @param data 数据
 * @returns {Promise<*>}
 */
const onRemove = (data, node) => {
    return menu.remove(data.id);
}

let row_data = undefined;

/**
 * 更新
 * @param node 节点
 * @param data 数据
 * @returns {Promise<*>}
 */
const onModify = (data, node) => {
    row_data = data;
    form_data.value = data.data;
}

/**
 * 新增/编辑操作成功
 *
 * @param ret 后台响应数据
 * @param data 表单数据
 */
const onSucceed = (ret, data) => {
    Object.assign(row_data, Bamboo.wrapObject(form_data.value, menu.mapper_menus))
}

// 查询机构列表
const queryMenus = () => menu.list({}).then(list => {
    if (Layers.isNotEmpty(list)) {
        form_data.value = list[0];
    }
    const ret = Bamboo.toTree(list, menu.mapper_menus);
    console.log(ret)
    return ret;
})

</script>
